<template>
  <el-row class="widget-col widget-view"
          type="flex"
          :class="{active: selectWidget.key == element.key}"
          :gutter="element.options.gutter ? element.options.gutter : 0"
          :justify="element.options.justify"
          :align="element.options.align">
    <el-col v-for="(col, colIndex) in element.columns" :key="colIndex" :span="col.span ? col.span : 0">

      <draggable
              v-model="col.list"
              :no-transition-on-drag="true"
              v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
              @end="handleMoveEnd"
              @add="handleWidgetColAdd($event, element, colIndex)"
      >
        <transition-group name="fade" tag="div" class="widget-col-list">
          <widget-form-item
                  v-for="(el, i) in col.list"
                  :key="el.key"
                  v-if="el.key"
                  :element="el"
                  :select.sync="selectWidget"
                  :index="i"
                  :data="col">
          </widget-form-item>
        </transition-group>
      </draggable>
    </el-col>
    <div class="widget-view-action widget-col-action" v-if="selectWidget.key == element.key">

      <i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)"></i>
    </div>

    <div class="widget-view-drag widget-col-drag" v-if="selectWidget.key == element.key">
      <i class="iconfont icon-drag drag-widget"></i>
    </div>
  </el-row>
</template>

<script>
    import Draggable from 'vuedraggable'
    import WidgetFormItem from '../WidgetFormItem'
    export default {
        components: {
            Draggable,
            WidgetFormItem,
        },
        props: {
            data: {
                type: Object,
                required: true
            },
            index: {
                type: Number,
                required: true
            },
            select: {
                type: Object,
                required: true
            },
            widgetDelete: Function,
            moveEnd: Function
        },
        data() {
            return {
                element: this.data,
                selectWidget: this.select,
            }
        },

        methods: {
            handleMoveEnd({newIndex, oldIndex}) {
                this.$emit('move-end', newIndex, oldIndex)
            },

            handleWidgetColAdd($event, row, colIndex) {
                console.log('coladd', $event, row, colIndex)
                const newIndex = $event.newIndex
                const oldIndex = $event.oldIndex
                const item = $event.item

                // TODO: 待实现对嵌套布局的支持
                if (row.columns[colIndex].list[newIndex].type == 'card' || row.columns[colIndex].list[newIndex].type == 'grid') {
                    row.columns[colIndex].list.splice(newIndex, 1)
                    this.$message.info({
                        message: '暂不支持布局组件嵌套',
                        center: true,
                    })
                    return false;
                }

                // 防止布局元素的嵌套拖拽
                if (item.className.indexOf('data-grid') >= 0) {

                    // 如果是列表中拖拽的元素需要还原到原来位置
                    item.tagName === 'DIV' && this.data.list.splice(oldIndex, 0, row.columns[colIndex].list[newIndex])

                    row.columns[colIndex].list.splice(newIndex, 1)

                    return false
                }

                console.log('from', item)

                const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)

                this.$set(row.columns[colIndex].list, newIndex, {
                    ...row.columns[colIndex].list[newIndex],
                    options: {
                        ...row.columns[colIndex].list[newIndex].options,
                        remoteFunc: 'func_' + key
                    },
                    key,
                    // 绑定键值
                    model: row.columns[colIndex].list[newIndex].type + '_' + key,
                    rules: []
                })

                if (row.columns[colIndex].list[newIndex].type === 'radio' || row.columns[colIndex].list[newIndex].type === 'checkbox' || row.columns[colIndex].list[newIndex].type === 'select') {
                    this.$set(row.columns[colIndex].list, newIndex, {
                        ...row.columns[colIndex].list[newIndex],
                        options: {
                            ...row.columns[colIndex].list[newIndex].options,
                            options: row.columns[colIndex].list[newIndex].options.options.map(item => ({
                                ...item
                            }))
                        }
                    })
                }

                this.selectWidget = row.columns[colIndex].list[newIndex]
            },

            handleWidgetDelete() {
                this.$emit('widget-delete', this.index)
            },
        },
        watch: {
            select(val) {
                this.selectWidget = val
            },
            selectWidget: {
                handler(val) {
                    this.$emit('update:select', val)
                },
                deep: true
            }
        }
    }
</script>
